<template>
  <div class="nav-nav-study">
    <div class="inner-slide">
      <div class="title">快捷链接</div>
      <ul class="ul-dropdown-list">
        <li v-for="item in STUDY_LIST" :key="item.value" class="item" @click="navClick(item)">
          <img :src="item.icon" alt="" class="item-icon" />
          <span class="item-title">{{ item.title }}</span>
        </li>
      </ul>
    </div>
    <div class="inner-content">
      <div class="group-list">
        <div class="group-item">
          <div v-for="item in industryWaterfullData" :key="item.rguid" class="group-item-inner">
            <div class="news" v-for="(ite,ind) in item" :key="ind">
              <div class="title-box">
                <div class="title">{{ ite.industryName }}</div>
              </div>
              <div class="group-children">
                <div
                  v-for="children in ite.children"
                  :key="children.rguid"
                  class="children-item"
                  @click="groupClick(children)"
                >
                  <div class="text">{{ children.industryName }}</div>
                <!-- <div class="line"></div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { STUDY_LIST, INDUSTRY_ICONS } from './navmenu.data';
import { verifyRoles } from '@/utils/verify';
export default {
  filters: {
    groupIcon (item) {
      return INDUSTRY_ICONS[item.industryName] || INDUSTRY_ICONS['其他'];
    }
  },
  data () {
    return {
      STUDY_LIST,
      newres: []
    };
  },
  computed: {
    industryData () {
      return this.$store.state.investigate.industryData || [];
    },
    // 组装树形结构行业数据
    industryDataTree () {
      let arr = [];
      if (this.industryData.length > 0) {
        arr = this.industryData.filter((item) => {
          const childArr = this.industryData.filter((child) => child.pid === item.rguid);
          item.children = childArr.length > 0 ? childArr : [];

          return !item.pid;
        });
      }
      return arr;
    },

    // 简单实现瀑布流数据
    industryWaterfullData () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.newres = [];
      if (this.industryDataTree.length > 0) {
        const res1 = [];
        const res2 = [];
        const res3 = [];
        const res4 = [];

        for (let i = 0; i < this.industryDataTree.length; i++) {
          if (i % 4 == 0) {
            res1.push(this.industryDataTree[i]);
          }
          if (i % 4 == 1) {
            res2.push(this.industryDataTree[i]);
          }
          if (i % 4 == 2) {
            res3.push(this.industryDataTree[i]);
          }
          if (i % 4 == 3) {
            res4.push(this.industryDataTree[i]);
          }
        }
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.newres.push(res1);
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.newres.push(res2);
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.newres.push(res3);
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.newres.push(res4);
        return this.newres;
      }
      return [];
    }
  },
  created () {
    if (this.industryData.length === 0) {
      this.$store.dispatch('getIndustryData');
    }
  },
  methods: {
    // 获取count最小对象
    getMinCountData (arr) {
      if (arr.length > 0) {
        return arr.sort((a, b) => {
          return a.count - b.count;
        })[0];
      }
    },
    navClick (item) {
      if (item.title === '覆盖股票池' || item.title === '研究产品') {
        const judge = verifyRoles('research', 0);
        if (judge) {
          this.$emit('nav-click', item);
        }
      } else {
        this.$emit('nav-click', item);
      }
    },

    groupClick (item) {
      this.$emit('group-click', item);
    }
  }
};
</script>
<style lang="scss" scoped>
.nav-nav-study {
  display: flex;
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #D8DCE6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  .inner-slide {
    position: relative;
    width: 200px;
    height: 100%;
    padding: 20px 24px ;
    width: 200px;
    background: #F5FAFF;

    &::before {
      content: '';
      position: absolute;
      z-index: -1;
      top: 0;
      right: 0;
      width: 50vw;
      height: 100%;
    }
    .title{
      font-family: 'Source Han Sans CN';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 6px;
      /* identical to box height */

      color: #333333;
    }
  }
  .inner-content {
    overflow-y: auto;
    // padding: 20px 0;
    padding-top: 24px;
    margin-left: 40px;
    flex: 1;
  .group-list {
      // display: flex;
      // flex-wrap: wrap;

      .group-item {
        // width: 180px;
        margin-right: 15px;
        display: flex;
        flex-wrap: wrap;
        &:nth-child(5n + 5) {
          margin-right: 0;
        }

        .group-item-inner {
          margin-bottom: 20px;
          width: 206px;
          // border-bottom: solid 1px #E7EBF3;
          padding-right: 20px;
          padding-bottom: 23px;
          .news{
            margin-bottom: 19px;
          }
          &:nth-child(4n){
            // padding-left: 0;
            width: 160px;
          }
          &:nth-child(9){
            // padding-left: 0;
            border: none;
            padding-bottom: 0px;
          }
          &:nth-child(10){
            // padding-left: 0;
            border: none;
            padding-bottom: 0px;
          }
          &:nth-child(11){
            // padding-left: 0;
            border: none;
            padding-bottom: 0px;
          }
          &:nth-child(12){
            // padding-left: 0;
            border: none;
            padding-bottom: 0px;
          }
          .title-box {
            display: flex;
            padding-bottom: 8px;
            // margin-bottom: 5px;
            align-items: center;
            width: 187px;
            border-bottom: 1px solid #D5D8DE;
            .group-icon {
              width: 30px;
              height: auto;
            }

            .title {
              font-family: 'Source Han Sans CN';
              font-style: normal;
              font-weight: 700;
              font-size: 16px;
              line-height: 24px;
              /* identical to box height */
              color: #000000;
              // margin-bottom: 8px;
            }
          }

          .group-children {
            // padding-left: 5px;
            width: 160px;
            padding-top: 10px;
            // margin-left: 30px;
            // display: flex;
            // flex-wrap: wrap;
            .children-item {
              margin-bottom: 10px;
              // display: flex;
              cursor: pointer;
              font-family: 'Source Han Sans CN';
              font-style: normal;
              font-weight: 400;
              font-size: 14px;
              line-height: 21px;
              /* identical to box height */
              color: #4B5668;
              &:hover {
                color: $app-main-color;
              }
            }
            .text{
              display: inline-block;
            }
            .line{
              display: inline-block;
              width: 1px;
              height: 14px;
              background-color:  #4B5668;
              // border: 1px solid #4B5668;
              margin: 5px 5px 0;
            }
          }
        }
      }
    }
  }
  .ul-dropdown-list {
    .item {
      display: flex;
      position: relative;
      height: 50px;
      padding: 0 15px;
      background: rgba(153, 198, 243, 0.3);
      // background: #eff3ff;
      border-radius: 4px;
      cursor: pointer;
      align-items: center;
      background: linear-gradient(185.89deg, #E8EEFD 8.08%, rgba(248, 251, 255, 0.88) 81.76%);
      border: 2px solid #FFFFFF;
      box-shadow: 0px -4px 16px -2px #FFFFFF, 0px 2px 2px rgba(197, 210, 232, 0.4);
      border-radius: 4px;
      &:not(:last-child) {
        margin-bottom: 15px;
      }

      &:hover {
        .item-title {
          color: $app-main-color;
        }
      }

      .item-icon {
        width: 30px;
        height: 30px;
      }

      .item-title {
        margin-left: 20px;
        font-size: 16px;
        font-weight: bold;
      }

      .tag {
        transform-origin: top right;
        transform: scale(0.8);
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        padding: 0 4px;
        background: #f42927;
        border-radius: 0 0 0 8px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        color: #fff;
      }
    }
  }
}
</style>
